var tableIns;
layui.extend({
    dtree: '/layui_ext/dist/dtree'
}).use(['jquery', 'layer', 'form', 'table', 'dtree'], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var dtree = layui.dtree;
    //渲染数据表格
    tableIns = table.render({
        elem: '#menuTable'   //渲染的目标对象
        , url: '/system/queryMenuAllList' //数据接口
        , title: '菜单数据表'//数据导出来的标题
        , toolbar: "#menuToolBar"   //表格的工具条
        , height: 'full-170'
        , cellMinWidth: 100 //设置列的最小默认宽度
        , page: 1
        , limits: [10, 20, 30]
        , limit: 10//默认采用3
        , cols: [[   //列表数据
            {field: 'id', title: 'ID', align: 'center', width: '45'}
            , {field: 'pid', title: '父节点ID', align: 'center', width: '100'}
            , {field: 'title', title: '菜单名称', align: 'center', width: '120'}
            , {field: 'href', title: '菜单地址', align: 'center', width: '220'}
            , {
                field: 'spread', title: '是否展开', align: 'center', width: '100', templet: function (d) {
                    return d.spread == '1' ? '<a color=blue>展开</a>' : '<a color=red>不展开</a>';
                }
            }
            , {
                field: 'icon', title: '菜单图标', align: 'center', width: '100', templet: function (d) {
                    return "<div class='layui-icon'>" + d.icon + "</div>";
                }
            }
            , {
                field: 'available', title: '是否可用', align: 'center', width: '100', templet: function (d) {
                    return d.available == '1' ? '<a color=blue>可用</a>' : '<font color=red>不可用</font>';
                }
            }
            , {fixed: 'right', title: '操作', width: 180, align: 'center',templet:function(e){
                    if (e.pid==0){
                        return '';
                    } else {
                        return'<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>\n' +
                            '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                    }
                }}
        ]]
    })
    //模糊查询
    $("#doSearch").click(function () {
        var params = $("#searchFrm").serialize();
        tableIns.reload({
            url: "/system/queryMenuAllList?" + params
        })
    });
    //监听行工具事件
    table.on('tool(menuTable)', function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        if (layEvent === 'del') { //删除
            //先判断当前菜单有没有子节点
            $.post("/system/checkMenuHasChildren?id=" + data.id, function (obj) {
                if (obj == 0) {
                    layer.msg("当前菜单有子节点同，请先删子节点");
                } else {
                    layer.confirm('真的删除【' + data.title + '】这个菜单吗', function (index) {
                        //向服务端发送删除指令
                        $.post("/system/deleteMenu", {id: data.id}, function (res) {
                            if(res > 0){
                                layer.msg("节点删除成功！");
                            }else{
                                layer.msg("节点删除失败！");
                            }
                            //刷新数据 表格
                            tableIns.reload();
                            //刷新左边的树
                            window.parent.left.menuTree.reload();
                            //刷新添加和修改的下拉树
                            menuTree.reload();
                        })
                    });
                }
            })


        } else if (layEvent === 'edit') { //编辑
            openUpdateMenu(data);
        }
    });
    var url;
    var mainIndex;
    //监听头部工具栏事件
    table.on("toolbar(menuTable)", function (obj) {
        switch (obj.event) {
            case 'add':
                openAddMenu();
                break;
        }
        ;
    })

    //打开添加页面
    function openAddMenu() {
        mainIndex = layer.open({
            type: 1,
            title: '添加菜单',
            content: $("#saveOrUpdateDiv"),
            area: ['800px', '450px'],
            success: function (index) {
                //清空表单数据
                $("#dataFrm")[0].reset();
                $("#menuSelectDiv").removeClass("layui-show");
                url = "/system/addMenu";
            }
        });
    }

    //打开修改页面
    function openUpdateMenu(data) {
        mainIndex = layer.open({
            type: 1,
            title: '修改用户',
            content: $("#saveOrUpdateDiv"),
            area: ['800px', '450px'],
            success: function (index) {
                form.val("dataFrm", data);
                url = "/system/updateMenu";
                //反选下拉树
                var pid = data.pid;
                var params = dtree.dataInit("menuTree", pid);
                //移除打开的样式
                $("#menuSelectDiv").removeClass("layui-show");
                //给下拉框的text框赋值
                $("#pid_str").val(params.context);
            }
        });
    }

    //初始化添加和修改页面的下拉树
    var menuTree = dtree.render({
        elem: "#menuTree",
        dataStyle: "layuiStyle",  //使用layui风格的数据格式
        response: {message: "msg", statusCode: 0},  //修改response中返回数据的定义
        dataFormat: "list",  //配置data的风格为list
        url: "/system/loadMenuMangerLeftTreeJson?spread=1",  // 使用url加载（可与data加载同时存在）
        icon: "2",
        accordion: true
    });

    $("#pid_div").on("click", function () {
        $(this).toggleClass("layui-form-selected");
        $("#menuSelectDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
    });
    dtree.on("node(menuTree)", function (obj) {
        $("#pid_str").val(obj.param.context);
        $("#pid").val(obj.param.nodeId);
        $("#pid_div").toggleClass("layui-form-selected");
        $("#menuSelectDiv").toggleClass("layui-show layui-anim layui-anim-upbit");
    });
    //保存
    form.on("submit(doSubmit)", function (obj) {
        //序列化表单数据
        var params = $("#dataFrm").serialize();
        $.post(url, params, function (obj) {
            layer.msg(obj);
            //关闭弹出层
            layer.close(mainIndex)
            //刷新数据 表格
            tableIns.reload();
            //刷新左边的树
            window.parent.left.menuTree.reload();
            //刷新添加和修改的下拉树
            menuTree.reload();
        })
    });

});

function reloadTable(id) {
    tableIns.reload({
        url: "/system/queryMenuAllList?id=" + id
    })
}